<template>
  <div>
    <template v-if="value">
      <div v-if="isImg">
        <template v-for="(item, _) in value" :key="_">
          <ImagePreview v-if="isImgTypeByName(item.fileName)" :imageList="[item.url]" />
          <HFileReview :info="item" labelField="fileName" valueField="preUrl" v-else />
        </template>
      </div>
      <div v-else-if="isSubTable">
        <SubTable :disabled="true" :parentParam="{}" :config="simpleChildTable" :value="value" />
      </div>
      <div v-else>{{ value }} </div>
    </template>
    <div v-else> - </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, computed } from 'vue';
  import { propTypes } from '/@/utils/propTypes';
  import { isImgTypeByName } from '/@/components/Upload/src/helper';
  import { createImgPreview, ImagePreview } from '/@/components/Preview/index';
  import { downloadByApiUrl } from '/@/utils/file/download';
  import { HFileReview } from '/@/components/HFileReview';
  import SubTable from './SubTable.vue';
  // disabled
  export default defineComponent({
    name: 'Readonly',
    components: { ImagePreview, HFileReview, SubTable },
    props: {
      type: propTypes.string,
      value: propTypes.any,
      simpleChildTable: Object as PropType<any>,
    },
    setup(props) {
      const isImg = computed(() => {
        return props.type === 'Upload';
      });
      const isSubTable = computed(() => {
        return props.type === 'SubTable';
      });
      const handleDownload = ({ url = '', doc_ext, fileName }) => {
        downloadByApiUrl(url, { doc_ext, fileName });
      };
      return {
        isImg,
        isSubTable,
        isImgTypeByName,
        createImgPreview,
        handleDownload,
      };
    },
  });
</script>
<style lang="less" scoped></style>
